<template>
  <div class="all">
    <el-tabs v-model="activeName">
      <el-tab-pane label="老人统计"
                   name="first">
        <div class="two_chart_line">
          <el-card class="left_card_of_2charts"
                   shadow="hover"
                   :body-style="{ padding: '5px'}">
            <div id="elderly_chart"
                 style="width: 450px; height: 300px" />
          </el-card>
          <!-- 最近七天报警 -->
          <!-- <el-card id="cpc_age_chart_card"
                   shadow="hover"
                   :body-style="{ padding: '5px'}">
            <div id="alertChart"
                 style="width: 450px; height: 300px" />
          </el-card> -->
        </div>
        <el-form ref="queryForm"
                 :model="queryParams"
                 :inline="true"
                 label-width="68px">
          <el-form-item label="老人姓名"
                        prop="elderlyname">
            <el-input v-model="queryParams.elderlyname"
                      placeholder="请输入老人姓名"
                      clearable
                      size="small"
                      style="width: 240px"
                      @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="手机号码"
                        prop="phone">
            <el-input v-model="queryParams.phone"
                      placeholder="请输入老人手机号码"
                      clearable
                      size="small"
                      style="width: 240px"
                      @keyup.enter.native="handleQuery" />
          </el-form-item>
          <!-- <el-form-item label="家属姓名"
                        prop="familyName">
            <el-input v-model="queryParams.familyName"
                      placeholder="请输入家属姓名"
                      clearable
                      size="small"
                      style="width: 240px"
                      @keyup.enter.native="handleQuery" />
          </el-form-item> -->
          <el-form-item label="创建时间">
            <el-date-picker v-model="dateRange"
                            size="small"
                            style="width: 240px"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期" />
          </el-form-item>
          <!-- <el-form-item label="楼栋号">
            <el-input-number v-model="queryParams.buildingNumber"
                             controls-position="right"
                             style="width: 240px"
                             :min="1"
                             :max="20"
                             @change="handleChange" />
          </el-form-item>
          <el-form-item label="单元号">
            <el-input-number v-model="queryParams.groupNumber"
                             controls-position="right"
                             style="width: 240px"
                             :min="1"
                             :max="3"
                             @change="handleChange" />
          </el-form-item> -->
          <el-form-item style="margin-left: 40px">
            <el-button type="primary"
                       icon="el-icon-search"
                       size="mini"
                       @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh"
                       size="mini"
                       @click="resetMemberQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="elderlyTable"
                  style="width: 100%"
                  :default-sort="{ prop: 'buildtime', order: 'descending' }">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left"
                       inline
                       class="demo-table-expand">
                <el-form-item label="老人姓名">
                  <span>{{ props.row.elderlyname }}</span>
                </el-form-item>
                <el-form-item label="老人年龄">
                  <span>{{ props.row.age }}</span>
                </el-form-item>
                <el-form-item label="老人 ID">
                  <span>{{ props.row.elderlyid }}</span>
                </el-form-item>
                <el-form-item label="地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="老人电话">
                  <span>{{ props.row.phone }}</span>
                </el-form-item>
                <el-form-item label="性别">
                  <span v-if="props.row.gender==0">男</span>
                  <span v-if="props.row.gender==1">女</span>
                </el-form-item>
                <el-form-item label="家属电话">
                  <span>{{ props.row.familyphone }}</span>
                </el-form-item>
                <br>
                <el-divider v-if="
                    props.row.families != null && props.row.families.length >= 1
                  " />
                <el-form v-for="family in props.row.families"
                         :key="family">
                  <el-form-item label="亲属姓名">
                    <span>{{ family.name }}</span>
                  </el-form-item>
                  <el-form-item label="亲属关系">
                    <span>{{ family.ralation }}</span>
                  </el-form-item>
                  <el-form-item label="亲属电话">
                    <span>{{ family.telephone }}</span>
                  </el-form-item>
                </el-form>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="老人 ID"
                           prop="elderlyid" />
          <el-table-column label="老人姓名"
                           prop="elderlyname" />
          <el-table-column label="年龄"
                           prop="age" />
          <el-table-column label="创建时间"
                           prop="buildtime"
                           sortable
                           :sort-method="sortBuildTime" />
          <el-table-column label="最近求助时间"
                           prop="lasthelptime"
                           sortable
                           :sort-method="sortLastHelp" />
          <el-table-column label="操作"
                           center>
            <template slot-scope="scope">
              <el-button size="mini"
                         type="text"
                         icon="el-icon-edit"
                         @click="handleUpdate(scope.row)">修改</el-button>
              <el-button v-hasPermi="['community:elderly:remove']"
                         size="mini"
                         type="text"
                         icon="el-icon-delete"
                         @click="handleDelete(scope.row)">删除</el-button>
              <el-button size="mini"
                         type="text"
                         icon="el-icon-notebook-1"
                         @click="handleInfo(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList" />
        <!-- 老人报警详情dialog -->
        <el-dialog title="老人一键求助详情"
                   center
                   :visible.sync="infoFlag">
          <el-table :data="infoTable"
                    stripe>
            <el-table-column label="求助时间"
                             prop="time"
                             center />
            <el-table-column label="小程序推送情况"
                             prop="type" />
          </el-table>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="儿童统计"
                   name="second">
        <el-form ref="queryForm"
                 :model="queryParams"
                 :inline="true"
                 label-width="68px">
          <el-form-item label="儿童姓名"
                        prop="userName">
            <el-input v-model="queryParams.userName"
                      placeholder="请输入儿童姓名"
                      clearable
                      size="small"
                      style="width: 240px"
                      @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="手机号码"
                        prop="phonenumber">
            <el-input v-model="queryParams.phoneNumber"
                      placeholder="请输入儿童手机号码"
                      clearable
                      size="small"
                      style="width: 240px"
                      @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="家属姓名"
                        prop="familyName">
            <el-input v-model="queryParams.familyName"
                      placeholder="请输入家属姓名"
                      clearable
                      size="small"
                      style="width: 240px"
                      @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker v-model="queryParams.dateRange"
                            size="small"
                            style="width: 240px"
                            type="datetimerange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期" />
          </el-form-item>
          <el-form-item label="楼栋号">
            <el-input-number v-model="queryParams.buildingNumber"
                             controls-position="right"
                             style="width: 240px"
                             :min="1"
                             :max="20"
                             @change="handleChange" />
          </el-form-item>
          <el-form-item label="单元号">
            <el-input-number v-model="queryParams.groupNumber"
                             controls-position="right"
                             style="width: 240px"
                             :min="1"
                             :max="3"
                             @change="handleChange" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- <el-tab-pane label="家属管理"
                   name="third">角色管理</el-tab-pane> -->
    </el-tabs>

  </div>
</template>
<script>
import * as echarts from 'echarts'
import { listElderly, getElderlyChart, getElderly, delElderly, addElderly, updateElderly, exportElderly } from '@/api/ElderlyAndChildren/elderly'

export default {
  data () {
    return {
      // 老人性别字典
      genderOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        elderlyname: null,
        gender: null,
        phone: null,
        age: null,
        buildtime: null,
        lasthelptime: null,
        address: null,
        familyphone: null
      },
      dateRange: [],
      activeName: 'first',
      // 老人信息列表
      elderlyTable: [],
      // 查询列表

      // 查询总个数
      total: null,
      // 老人报警详情flag
      infoFlag: false,
      infoTable: [
        {
          time: '2021-05-31 10:20:10',
          type: '已推送'
        },
        {
          time: '2021-05-31 10:20:10',
          type: '已推送'
        },
        {
          time: '2021-05-31 10:20:10',
          type: '已推送'
        },
        {
          time: '2021-05-31 10:20:10',
          type: '已推送'
        }
      ],
      elderlyList: [],
      elderlyChartInfo: [],
      elderlyChart_option: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        title: {
          text: null,
          x: 'left',
          y: 'top'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'bottom',
          feature: {
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '性别',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '25%'],
            label: {
              position: 'inner',
              fontSize: 12,
              formatter: function (params) {
                if (params.value == 0) { // 为0时不显示
                  return ''
                } else {
                  return params.value
                }
              }
            },
            data: [
              { value: this.count_man, name: '男' },
              { value: this.count_woman, name: '女' }
            ]
          },
          {
            name: '年龄',
            type: 'pie',
            radius: ['35%', '50%'],

            startAngle: 180,
            itemStyle: {
              // borderRadius: 20,
              // // borderColor: '#fff',
              // borderWidth: 2,
              labelLine: {
                normal: {
                  length: 2
                }
              }
            },
            data: [
              { value: this.count_86, name: '86岁以上' },
              { value: this.count81_85, name: '81-85岁' },
              { value: this.count76_80, name: '76-80岁' },
              { value: this.count71_75, name: '71-75岁' },
              { value: this.count66_70, name: '66-70岁' },
              { value: this.count60_65, name: '60-65岁' }
            ]
          }
        ]
      },
      elderlyChart: null,
    }
  },
  created () {
    this.getList()
    this.getDicts('sys_user_sex').then(response => {
      this.genderOptions = response.data
    })
  },
  mounted () {
    this.elderlyChart = echarts.init(document.getElementById('elderly_chart'))
    this.elderlyChart.setOption(this.elderlyChart_option)
    this.alertChart()
  },
  methods: {
    async getList () {
      const temp = this.addDateRange(this.queryParams, this.dateRange)
      console.log(temp.beginTime)
      listElderly(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.elderlyTable = response.rows
        this.total = response.total
        this.loading = false
      })
      const a = await getElderlyChart()
      const sum = a.countMan + a.countWoman
      this.$set(this.elderlyChart_option.series[0].data[0], 'value', a.countMan == 0 ? null : a.countMan)
      this.$set(this.elderlyChart_option.series[0].data[1], 'value', a.countWoman == 0 ? null : a.countWoman)
      this.$set(this.elderlyChart_option.series[1].data[0], 'value', a.countUp86 == 0 ? null : a.countUp86)
      this.$set(this.elderlyChart_option.series[1].data[1], 'value', a.count81and85 == 0 ? null : a.count81and85)
      this.$set(this.elderlyChart_option.series[1].data[2], 'value', a.count76and80 == 0 ? null : a.count76and80)
      this.$set(this.elderlyChart_option.series[1].data[3], 'value', a.count71and75 == 0 ? null : a.count71and75)
      this.$set(this.elderlyChart_option.series[1].data[4], 'value', a.count66and70 == 0 ? null : a.count66and70)
      this.$set(this.elderlyChart_option.series[1].data[5], 'value', a.count60and65 == 0 ? null : a.count60and65)
      this.$set(this.elderlyChart_option.title, 'text', '老年人总数：' + sum + '人')
      this.elderlyChart.setOption(this.elderlyChart_option)
    },
    handleDelete (row) {
      const id = row.elderlyid
      const name = row.elderlyname
      this.$confirm(
        "是否确认删除编号'" + id + "' " + name + '的数据项？',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(function () {
        return delElderly(id)
      }).then(() => {
        this.getList()
        this.msgSuccess('删除成功')
      })
    },
    handleUpdate (row) {
      const id = row.elderlyid
    },
    handleInfo (row) {
      console.log('222')
      this.infoFlag = true
    },
    sortBuildTime (a, b) {
      var at = a.buildtime.valueOf()
      var bt = b.buildtime.valueOf()
      return at > bt
    },
    sortLastHelp (a, b) {
      if (a == null) {
        return -1
      } else if (b == null) {
        return 1
      } else {
        return a > b
      }
    },
    handleQuery () {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery () {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // elderlyChart () {
    //   this.elderlyChart = echarts.init(document.getElementById('elderly_chart'))
    //   this.elderlyChart.setOption(elderlyChart_option)
    // },
    alertChart () {
      var chartDom = document.getElementById('alertChart')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '最近七天报警次数'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: ['06-10', '06-11', '06-12', '06-13', '06-14', '06-15', '06-16']
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [{
          data: [0, {
            value: 2,
            itemStyle: {
              color: '#a90000'
            }
          }, 1, 0, 0, 1, 0],
          type: 'bar'
        }]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style>
.all {
  margin: 25px auto;
  width: 80%;
  padding-left: 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.two_chart_line div {
  display: inline-block;
}
.two_chart_line {
  display: flex;
  justify-content: center;
  margin-bottom: 35px;
}
.left_card_of_2charts {
  margin-right: 30px;
}
</style>
